import { Col, Row, Button, Card } from 'antd'
import React, { useState, useEffect, useContext } from 'react'
import { Card as MyCard } from '&/appComponents/Antd'
import EleAll from './EleAll'
import SameRing from './SameRing'
import { Context } from '../context.js'
import sourceImg from '&/assets/images/imgs'
import './index.scss'


const EchartsHome = () => {
  const { rankData, generalData } = useContext(Context);
  const [industryOn, setIndustryOn] = useState(false)
  const [areaOn, setAreaOn] = useState(false)
  const [seletedObj, setSelectedObj] = useState([])
  const [preList, setPreList] = useState([]);


  const IndusrtyHandleClick = () => {
    setIndustryOn(prev => !prev);
  };
  const AreaHandleClick = () => {
    setAreaOn(prev => !prev);
  }

  const TextCard = ({ children }) => {
    return <Card style={{ marginRight: '10px', flex: 1 }} bodyStyle={{ height: 'calc(100% - 18px)' }}>
      {children}
    </Card>
  }
  if (!generalData?.ent_total_value) return
  return (
    <div style={{ display: 'flex', flex: 1, height: '100%', flexDirection: 'column', gap: '10px' }} >
      <div style={{ flex: 1, display: 'flex', flexDirection: 'row', height: 'calc(100% - 38px)' }}>
        <TextCard>
          <h3><img src={sourceImg.changeheadertitle} style={{ width: "14px", height: "14px", paddingRight: "3px" }}></img>企业用电量</h3>
          <div className='totalvalue'>
            {generalData?.ent_total_value == "--" ? "--" : Number(generalData?.ent_total_value||0).toFixed(2)}kwh
          </div>
        </TextCard>
        <TextCard>
          <h3><img src={sourceImg.changeheadertitle} style={{ width: "14px", height: "14px", paddingRight: "3px" }}></img>用电量占比</h3>
          <div className='TextCardratio'>
            <h4 className='TextCardratio-child'><img src={sourceImg.changeheaderzhanbi} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>行业占比：{generalData?.ratio?.industry}%</div></h4>
            <h4 className='TextCardratio-child'><img src={sourceImg.changeheaderzhanbi} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>区级占比：{generalData?.ratio?.county}%</div></h4>
          </div>

        </TextCard>
        <TextCard >
          <h3><img src={sourceImg.changeheadertitle} style={{ width: "16px", height: "16px", paddingRight: "3px" }}></img>用电量排名</h3>
          <div className='TextCardrank'>
            <h4 className='TextCardrank-child'><img src={sourceImg.changeheaderrank} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>全市排名：{generalData?.rank?.city}</div></h4>
            <h4 className='TextCardrank-child'><img src={sourceImg.changeheaderrank} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>区内排名：{generalData?.rank?.county}</div></h4>
            <h4 className='TextCardrank-child'><img src={sourceImg.changeheaderrank} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>行业排名：{generalData?.rank?.industry}</div></h4>
          </div>

        </TextCard>
        <TextCard >
          <h3><img src={sourceImg.changeheadertitle} style={{ width: "16px", height: "16px", paddingRight: "3px" }}></img>用电量同比变幅排名</h3>
          <div className='TextCardrankData'>
            <h4 className='TextCardrankData-child'><img src={sourceImg.changeheadersing} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>全市排名：{rankData?.city_rank}</div></h4>
            <h4 className='TextCardrankData-child'><img src={sourceImg.changeheadersing} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>区内排名：{rankData?.county_rank}</div></h4>
            <h4 className='TextCardrankData-child'><img src={sourceImg.changeheadersing} style={{ width: "20px", height: "20px", display: "block", marginRight: "5px" }}></img><div>行业排名：{rankData?.industry_rank}</div></h4>
          </div>
        </TextCard>
      </div>

      <MyCard size="small" title="企业用电量变化趋势" style={{ width: '100%', flex: 2 }} bodyStyle={{ height: 'calc(100% - 38px)' }}
        extra={
          <div style={{ flex: "no-wrap", display: "flex", alignItems: "center", gap: '10px' }}>
            <Button
              type={industryOn ? 'primary' : 'default'}
              onClick={IndusrtyHandleClick}
            >行业均值</Button>
            <Button
              type={areaOn ? 'primary' : 'default'}
              onClick={AreaHandleClick}
            >区均值</Button>

          </div>
        } >
        <EleAll industryOn={industryOn} areaOn={areaOn} preList={preList} setPreList={setPreList}
        />
      </MyCard>


      <MyCard size="small" title="企业用电量同比、环比" style={{ width: '100%', flex: 2, marginBottom: '.625rem' }} bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <SameRing />
      </MyCard>
    </div>
  )
}

export default EchartsHome